<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java API 文档搜索</title>
</head>
<body>
    
    <!-- 通过 .container 来表示整个页面元素的容器-->
    <div class = "container">
        <!-- 1、 搜索框 + 搜索按钮 -->
        <div class = "header">
            <input type = "text">
            <button id = "search-btn">搜索</button>
        </div>

        <!-- 2、 显示搜索结果-->
        <div class = "result">
            <!-- 包含了很多条记录 -->
            <!-- 每个 .item 就表示一条记录-->
<!--            <div class = "item">-->
<!--                <a href = "#">我是标题</a>-->
<!--                <div class = "desc">我是一段描述 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt quam possimus, expedita quos delectus ea ipsam corporis. Porro nesciunt mollitia amet necessitatibus officiis magnam ab deserunt cumque ad? Consectetur, ut.</div>-->
<!--                <div class = "url">https://www.baidu.com</div>-->
<!--            </div>-->
        </div>
    </div>

    <style>
        /* 这部分代码来写样式 */
        /* 先去掉浏览器的默认样式 */
        /* 用 " * " 来选中所有元素 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 给整体的页面制定一个高度（和浏览器窗口一样高） */
        html, body {
            height: 100%;

            /* 设置背景图 */
            background-image: url(image/background.jpg);

            /* 设置背景图不平铺 */
            background-repeat: no-repeat;

            /* 设置背景图的位置 */
            background-position: center center;

            /* 设置背景图大小 */
            background-size: cover;
        }

        /* 针对 .container 也设置样式，实现版心效果*/
        .container {
            /* 宽度也可以设置成百分数的形式 */
            width: 1200px;
            height: 100%;

            /* 设置水平居中 */
            margin: 0 auto;

            /* 设置背景色，让版心和背景图能够区分开 */
            background-color: rgba(255, 255, 255, 0.8);

            /* 设置圆角矩形 */
            border-radius: 10px;

            /* 设置内边距，避免文字内容紧贴着边界*/
            padding: 20px;

            /* 加上这个属性，使得超出元素部分会自动生成一个滚动条 */
            overflow: auto;
        }

        .header {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header>input {
            width: 1050px;
            height: 50px;
            font-size: 22px;
            line-height: 50px;
            border-radius: 10px;
            padding-left: 10px;
        }

        .header>button {
            width: 100px;
            height: 50px;
            background-color: rgb(42, 107, 205);
            color: #fff;
            font-size: 22px;
            line-height: 50px;
            border-radius: 10px;
            border: none;
        }

        .header>button:active {
            background-color: gray;
        }

        .result .count{
            color: gray;
            margin-top: 10px;
        }

        .item {
            width: 100%;
            margin-top: 20px;
        }

        .item a {
            display: block;
            height: 40px;

            font-size: 22px;
            line-height: 40px;
            font-weight: 700;

            color: rgb(42, 107, 205);
        }

        .item .desc {
            font-size: 18px;
        }

        .item .url {
            font-size: 18px;
            color: rgba(0, 128, 0);
        }

        .item .desc i {
            color: red;
            /* 去掉斜体 */
            font-style: normal;
        }
    </style>

    <!-- 引入 jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        // 放置自己的 js 代码
        let button = document.querySelector("#search-btn");
        button.onclick = function() {
            // 先获取输入框内容
            let input = document.querySelector(".header input");
            let query = input.value;
            console.log("query: " + query);

            // 然后构造一个 ajax 请求发送给服务器
            $.ajax({
                type: "GET",
                url: "searcher?query=" + query,
                success: function(data, status) {
                    // success 这个函数会在请求成功后调用
                    // data 参数表示拿到的结果数据
                    // status 参数表示 HTTP 状态码
                    // 根据收到的数据结果，构造出页面内容
                    // console.log(data);
                    buildResult(data);
                }
            })
        }

        function buildResult(data) {
            // 通过这个函数，来把相应数据给构造成页面内容
            // 所以要做的工作就是，遍历 data 的每一个元素
            // 针对每个元素都创建一个 div.item，然后把标题，url，描述都构造好
            // 再把这个 div.item 加入到 div.result 中
            // 这些操作都是基于 DOM API 来展开的

            // 获取到 .result 这个标签
            let result = document.querySelector('.result');
            // 清空上次的结果
            result.innerHTML = '';

            // 先构造一个 div 用于显示结果个数
            let countDiv = document.createElement('div');
            countDiv.innerHTML = '当前找到 ' + data.length + ' 个结果';
            countDiv.className = 'count';
            result.appendChild(countDiv);

            // 此处的 for 循环就相当于 Java 中的 for each 循环
            // 此处得到的 item 就会分别代表 data 中的每个元素
            for (let item of data){
                let itemDiv = document.createElement('div');
                itemDiv.className = 'item';

                // 构造一个标题
                let title = document.createElement('a');
                title.href = item.url;
                title.innerHTML = item.title;
                title.target = '_blank';
                itemDiv.appendChild(title);

                // 构造一个描述
                let desc = document.createElement('div');
                desc.className = 'desc';
                desc.innerHTML = item.desc;
                itemDiv.appendChild(desc);

                // 构造一个 url
                let url = document.createElement('div');
                url.className = 'url';
                url.innerHTML = item.url;
                itemDiv.appendChild(url);
            
                // 把 itemDiv 加到 .result 中
                result.appendChild(itemDiv);
            
            }
        }

    </script>

</body>
</html>